<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1">
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache, must-revalidate">
    <meta http-equiv="expires" content="0">
    <!-- BEGIN 全局样式 -->
    <link rel="stylesheet" href="../../../lib/bootstrap-3.3.7-dist/css/bootstrap.min.css" type="text/css"/>
    <link rel="stylesheet" href="../../../css/reset-diy.css" type="text/css">
    <link rel="stylesheet" href="school-setting.css" type="text/css"/>
    <title>学校信息设置</title>
</head>
<body class="pb-30">
<div class="container-fluid pt-10">
    <div id="left">
        <form id="schoolInfo" class="center-block f-18">
            <div class="form-group">
                <label for="schoolName">学校名称</label>
                <input type="text" id="schoolName" class="form-control" name="name">
            </div>
            <div>
                <label>学校LOGO</label>
                <div class="img-preview logo-preview bk-gray size-MINI radius">
                    <img src="" alt="logo图片">
                </div>
                <div id="btn-logo"></div>
            </div>
            <div class="mt-30 mb-15">
                <label>登录背景</label>
                <div class="img-preview background-preview bk-gray size-MINI radius">
                    <img src="" alt="背景图片">
                </div>
                <div class="mt-5 f-12">建议尺寸：1920*1000px</div>
                <div id="btn-background" class="mt-5"></div>
            </div>


            <div class="clearfix">
                <a href="javascript:void(0);" class="preview btn-preview btn b-333 c-white f-l">预览</a>
                <a href="javascript:void(0);" class="preview btn-submit btn b-333 c-white f-r">确定</a>
            </div>
        </form>
    </div>

    <div id="right">
        <div class="f-18">效果预览</div>
        <header class="b-333 pos-r mt-5 mb-5">
            <div class="pos-middle c-white">
                <a class="preview-logo">
                    <img>
                    <span class="school-name"></span>
                </a>
            </div>
        </header>
        <div class="content">
            <iframe id="preview" src="preview.html"></iframe>
        </div>
    </div>
</div>


<!--核心脚本sss-->
<script src="../../../lib/jquery/1.9.1/jquery.js" type="text/javascript" charset="utf-8"></script>
<!--[if lt IE 9]>
<script src="../../../js/excanvas.min.js"></script>
<script src="../../../js/respond.min.js"></script>
<![endif]-->
<!--加密插件sss 必须放在jquery.myPlugIn_v1.0.js前面-->
<script src="../../../js/common/jsrsasign-all-min.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/crypto-js.min.js" type="text/javascript" charset="utf-8"></script>
<!--加密插件eee-->
<script src="../../../lib/layer/2.4/layer.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/common/jquery.myPlugIn_v1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="../../../js/work-box.min.js" type="text/javascript" charset="utf-8"></script>
<!--<script src="../../lib/laypage/1.2/laypage.js" type="text/javascript" charset="utf-8"></script>-->
<!--<script src="../../js/bootstrap.min.js" type="text/javascript"></script>-->

<script>
    var T = new Extend_base();
    jQuery(document).ready(function () {
        function SchoolSetting() {
            this.getSchoolData();
            this.clickEvent();
            this.submitEvent();
        }

        SchoolSetting.prototype = {
            clickEvent: function () {
                var _this = this;

                var a = new T.updateImg({
                    imgEle: ".logo-preview",
                    btnEle: "#btn-logo",
                    btnId: "#updateLogo",
                    btnText: "上传本地图片",
                    inputName: "logo",
                    // updateCb:_this.preview.bind(_this)
                });
                var b = new T.updateImg({
                    imgEle: ".background-preview",
                    btnEle: "#btn-background",
                    btnId: "#updateBackground",
                    btnText: "上传本地图片",
                    inputName: "image",
                    // updateCb:_this.preview.bind(_this)
                });

                // preview
                $(".btn-preview").on("click", function () {
                    _this.preview();
                });


            },
            getSchoolData: function () {
                var _this = this;
                T.ajaxSecret(url_join("school/school/show"), "post", {id: 18}, function (res) {
                    console.log("学校信息: ", res);
                    $("#schoolName").val(res.data.name);
                    $(".logo-preview img").attr("src", res.data.logo ? url_join(res.data.logo) : "../../../img/not-update.png");
                    $(".background-preview img").attr("src", res.data.image ? url_join(res.data.image) : "../../../img/not-update.png");
                    _this.preview(res);
                });
            },
            preview: function (res) {
                var _this = this;
                // right
                if (res) {
                    $(".school-name").text(res.data.name);
                    $(".preview-logo img").attr("src", url_join("") + res.data.logo);
                } else {
                    $(".preview-logo img").attr("src", $(".logo-preview img").attr("src"));
                }

                var logoSrc = $(".logo-preview img").attr("src");
                var bgSrc = $(".background-preview img").attr("src");

                T.saveSession("schoolPreview", {
                    name: $("#schoolName").val(),
                    logo: /not\-update\.png/.test(logoSrc) ? "" : logoSrc,
                    background: /not\-update\.png/.test(bgSrc) ? "" : bgSrc
                });
                document.getElementById('preview').contentWindow.location.reload(true);
            },
            submitEvent: function () {
                var _this = this;

                $(".btn-submit").on("click", function (e) {
                    var form = document.getElementById("schoolInfo");

                    // 开发阶段,临时使用
                    var _school_id = localStorage.getItem("schoolId");
                    var school_id = localStorage.getItem("schoolId");

                    $(form).append($("<input type='hidden' name='_school_id' value='" + _school_id + "'>"));
                    $(form).append($("<input type='hidden' name='school_id' value='" + school_id + "'>"));

                    var data = new FormData(form);

                    T.ajaxImg(url_join("school/school/update"), "post", data, function (e) {
                        console.log(e);
                        T.jumpLogin("操作成功,是否重新登录让修改生效?");
                        // layer.msg("操作成功", {icon: 1});
                        _this.preview();
                    });
                });
                return false;
            }
        };
        new SchoolSetting();

    });
</script>
</body>
</html>